<template>
    <div class="video_wrap">
        <div class="video_head">
            <img class="bgImg" src="@/assets/images/video_head.jpg" alt="">
            <a href="javascript:void(0);" @click="goIntro" class="skipBtn tag_type blink">跳 过</a>
        </div>
        <div class="videobox" @touchend.prevent="togglePlay">
            <video ref="video" id="video" x5-playsinline="" playsinline="" webkit-playsinline="" autoplay controls
                   :src="video"></video>
            <!-- <a href="javascript:void(0);" v-if="!isplayed" class="videoBtn"></a> -->
            <!-- <div class="videoMask" v-if="!isplayed"></div> -->
        </div>
        <div class="video_foot"><img class="bgImg" src="@/assets/images/video_foot.jpg" alt=""></div>
        <div class="slide_arrow"></div>
    </div>
</template>
<script>
  export default {
    data() {
      return {
        isplayed: true,
        video: 'https://zhiyangzhuli.oss-cn-beijing.aliyuncs.com/shiping.mp4',
        windowHeight: '',
        scrollHeight: '',
        myBody: '',
        disStar: 0,
        disEnd: 0,
      }
    },
    mounted() {
      this.getHeight()

      this.$nextTick(() => {
        if (this.scrollHeight == this.windowHeight) {
          this.myBody.addEventListener('touchend', this.bodytouchEnd, true)
          this.myBody.addEventListener('touchstart', this.bodytouchStar, true)
          this.myBody.addEventListener('touchmove', this.bodytouchMove, true)
        } else {
          window.addEventListener('scroll', this.handleScroll, true)
        }
      })
    },
    methods: {
      bodytouchEnd() {
        if (this.disStar - this.disEnd > 10 && this.disEnd > 8) {
          this.goIntro()
        }
        this.removeAction()
        this.disStar = 0
        this.disEnd = 0
      },
      removeAction() {
        this.myBody.removeEventListener('touchend', this.bodytouchEnd, true)
        this.myBody.removeEventListener('touchstart', this.bodytouchStar, true)
        this.myBody.removeEventListener('touchmove', this.bodytouchMove, true)
      },
      bodytouchStar(e) {
        const dis = e.touches[0].clientY
        this.disStar = dis
      },
      bodytouchMove(e) {
        const dis = e.touches[0].clientY
        this.disEnd = dis
      },
      getHeight() {
        this.myBody = document.querySelector("body")
        let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
        let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
        this.scrollHeight = parseInt(scrollHeight)
        this.windowHeight = parseInt(windowHeight)
      },
      handleScroll() {
        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
        let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
        if (scrollHeight - (scrollTop + windowHeight) <= 2) {
          this.goIntro()
        }
      },
      goIntro() {
        this.$router.replace({
          path: '/about'
        })
      },
      togglePlay() {
        this.isplayed = !this.isplayed;
        if (this.isplayed) {
          this.$refs.video.play();
        } else {
          this.$refs.video.pause();
        }
      }
    },
    beforeDestroy() {
      window.removeEventListener('scroll', this.handleScroll, true)
      this.removeAction()
    }
  }
</script>
<style scoped>
    .slide_arrow {
        width: 1rem;
        height: .63rem;
        display: inline-block;
        background-image: url('~@/assets/images/arrow_down99x63.png');
        background-repeat: no-repeat;
        background-size: 1rem .63rem;
        position: absolute;
        left: 50%;
        margin-left: -.5rem;
        bottom: 20px;
        animation: arrowAnimate 1s linear infinite;
    }

    @keyframes arrowAnimate {
        0% {
            bottom: 40px;
            opacity: 0;
        }
        100% {
            bottom: 20px;
            opacity: 1;
        }
    }

    @-webkit-keyframes arrowAnimate {
        0% {
            bottom: 40px;
            opacity: 0;
        }
        100% {
            bottom: 20px;
            opacity: 1;
        }
    }

    .video_wrap {
        position: absolute;
        height: 100%;
        left: 0;
        top: 0;
        width: 100%;
        min-height: 13.24rem;
    }

    .video_foot {
        position: absolute;
        width: 100%;
        bottom: 0;
        left: 0;
    }

    .video_head {
        width: 7.5rem;
        height: 3.71rem;
        position: relative;
    }

    .video_head > img.bgImg {
        width: 100%;
        height: 100%;
    }

    .video_foot {
        width: 7.5rem;
        height: 5.33rem;
    }

    .video_foot > img.bgImg {
        width: 100%;
        height: 100%;
    }

    .videobox {
        width: 7.5rem;
        height: 4.18rem;
        background-color: #000;
        position: relative;
    }

    #video {
        width: 100%;
        height: 100%;
    }

    .videoBtn {
        width: 1.29rem;
        height: 1.29rem;
        border-radius: 50%;
        overflow: hidden;
        background-image: url(~@/assets/images/videoPlaybtn.png);
        background-repeat: no-repeat;
        background-size: 1.29rem 1.29rem;
        position: absolute;
        top: 1.44rem;
        left: 3.1rem;
        z-index: 10;
    }

    .videoMask {
        content: '';
        width: 7.5rem;
        height: 4.18rem;
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, .2);
        z-index: 5;
    }

    .skipBtn {
        position: absolute;
        top: .29rem;
        right: .21rem;
    }

    .tag_type {
        width: 2.1rem;
        height: 1rem;
        background-size: 1.89rem .73rem;
    }

    /* 定义keyframe动画，命名为blink */
    @keyframes blink {
        0% {
            transform: scale(1);
        }
        100% {
            transform: scale(1.1);
        }
    }

    /* 添加兼容性前缀 */
    @-webkit-keyframes blink {
        0% {
            transform: scale(1);
        }
        100% {
            transform: scale(1.1);
        }
    }

    @-moz-keyframes blink {
        0% {
            transform: scale(1);
        }
        100% {
            transform: scale(1.1);
        }
    }

    @-ms-keyframes blink {
        0% {
            transform: scale(1);
        }
        100% {
            transform: scale(1.1);
        }
    }

    @-o-keyframes blink {
        0% {
            transform: scale(1);
        }
        100% {
            transform: scale(1.1);
        }
    }

    /* 定义blink类*/
    .blink {
        color: #fff;
        animation: blink 1s linear infinite;
        /* 其它浏览器兼容性前缀 */
        -webkit-animation: blink 1s linear infinite;
        -moz-animation: blink 1s linear infinite;
        -ms-animation: blink 1s linear infinite;
        -o-animation: blink 1s linear infinite;
    }
</style>
